<template>
  <div id="app apps">
    <h1>测试页面</h1>

    <button @click="tobom">点击一下</button>
    <button @click="openPopup()">打开缩小版浏览器窗口</button>

    <el-button :plain="true" @click="delconfirm">打开消息提示</el-button>
    <el-button :plain="true" @click="openVn">VNode</el-button>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      currentPage: 1, // 当前页码
      pageSize: 2, // 总页数
      totalItems: 0, // 总数据量
      items: [], // 当前页的数据列表
      val: "", // 目标页
    };
  },

  mounted() {
    // 在组件挂载后加载数据
    // this.fetchData();
  },
  methods: {
    delconfirm() {
      this.$confirm("此操作将永久删除该人员, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    // open() {
    //   this.$message("请填写完整信息");
    // },
    openVn() {
      const h = this.$createElement;
      this.$message({
        message: h("p", null, [
          h("span", null, "内容可以是 "),
          h("i", { style: "color: teal" }, "VNode"),
        ]),
      });
    },

    openPopup() {
      window.open(
        "http://localhost:8080/addpeople",
        "_blank",
        "width=1000,height=500,menubar=no,toolbar=no,location=no,status=no"
      );
    },
    tobom() {
      window.open("https://www.example.com", "_blank");
    },

    demolimit() {},

    // getStaffOne() {
    //   axios({
    //     url: "http://localhost:3002/staff/limit",
    //     method: "post",
    //     data: {
    //       pageSize: this.pageSize,
    //     },
    //   }).then((res) => {
    //     // console.log(res.data.list);
    //     this.items = res.data.list;
    //     this.totalItems = res.data.list.length;
    //   });
    // },

    // 去目标页：
    // topage() {
    //   // 首先验证输入的值
    //   const inputPage = parseInt(this.val, 10); // 尝试将val转换为整数
    //   if (isNaN(inputPage) || inputPage < 1 || inputPage > this.totalPages) {
    //     // 如果输入无效，可以显示一个错误消息或清除输入框
    //     // console.error("请输入有效的页码(1-" + this.totalPages + ")");
    //     this.val = ""; // 清空输入框（可选）
    //     return;
    //   }
    //   // 如果输入有效，更新当前页码并加载数据
    //   this.currentPage = inputPage;
    //   this.loadData(this.currentPage);
    // },

    // // 加载数据
    // loadData(page) {
    //   axios({
    //     url: "http://localhost:3002/staff/limit",
    //     method: "post",
    //     data: {
    //       page: page,
    //       pageSize: this.pageSize,
    //     },
    //   }).then((res) => {
    //     // console.log(res.data.list);
    //     this.items = res.data.list;
    //     this.totalItems = res.data.list.length;
    //   });
    // },
    // // 上一页
    // previousPage() {
    //   if (this.currentPage > 1) {
    //     this.currentPage--;
    //     this.loadData(this.currentPage);
    //   }
    // },
    // // 下一页
    // nextPage() {
    //   if (this.currentPage < this.totalPages) {
    //     this.currentPage++;
    //     this.loadData(this.currentPage);
    //   }
    // },
    // // 初始加载
    // fetchData() {
    //   this.loadData(this.currentPage);
    // },
  },
  computed: {
    // 计算每页的数量
    // totalPages() {
    //   return Math.ceil(this.totalItems / this.pageSize);
    // },
  },
};
</script>

<style scoped>
#app {
  background-color: #fff !important;
}
.gogo {
  margin: 0 6px;
  font-size: 13px;
}
.iptnumber {
  width: 30px;
  margin-right: 2px;
}
.count {
  margin: 7px;
  font-size: 13px;
}

.btnleft img {
  width: 10px;
  height: 10px;
}
.btnleft {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px rgb(133, 131, 131) solid;
}
.btngo {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 10px;
  border: 1px #9a9b9c solid;
  background: linear-gradient(#f2f0f0, #cdcecf);
  transform: translateY(-10%);
}
.btngo span {
  display: inline-block;
  transform: translateX(-30%);
}

.currentPage {
  background: linear-gradient(#87aacc, #c0d1e3);
  border-radius: 50%;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 0 5px;
  text-align: center;
  font-size: 14px;
  color: #fff;
}
</style>